<script setup lang="ts">

import { ref } from 'vue';
import { RouterLink } from 'vue-router';
const items = ref([
  {
    smallTitle: "如是OCR",
    smallDetails: "上传古籍图片至系统，利用AI古籍OCR技术识别文字，支持按列或页校对识别结果。",
    path: "/Ocr"
  },
  {
    smallTitle: "智能标点",
    smallDetails: "提交古籍文本至系统，AI自动标点引擎处理，提供现代标点和句读两种方式。用户可修改、保存、导出标点结果，所有文本在“我的标点”中管理。",
    path: "/punctuation"
  },
  {
    smallTitle: "标点迁移",
    smallDetails: "提交古籍文本至系统，AI自动标点引擎处理，提供现代标点和句读两种方式。用户可修改、保存、导出标点结果，所有文本在“我的标点”中管理。",
    path: "/migration"
  },
  {
    smallTitle: "多文本比对",
    smallDetails: "提交古籍文本至系统，AI自动标点引擎处理，提供现代标点和句读两种方式。用户可修改、保存、导出标点结果，所有文本在“我的标点”中管理。",
    path: "/comparision"
  },
  // 更多对象...
]);

</script>

<template>
  <div class="home">
    <div class="top">
      <text class="title">你好，我是如是古籍</text>
      <text class="detail">作为你的智能伙伴，我既能将古籍换为文字，也能进行多份相似文本对比。</text>
    </div>
    <div class="bottom">
      <RouterLink class="item" v-for="item in items" :to="item.path" :key="item.smallDetails">
        <div class="smalltitle">{{ item.smallTitle }}</div>
        <div>
          <div class="smalldetails">{{ item.smallDetails }}</div>
        </div>
      </RouterLink>
    </div>
  </div>
</template>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

.home .top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: clamp(18px, 3vw, 50px);
  font-weight: 600;
  margin-bottom: 1.5vh;
}

.detail {
  color: #6d6790;
  font-size: clamp(14px, 1.5vw, 20px);
}

.smalltitle {
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 20px);
}

.smalldetails {
  color: #6d6790;
  font-size: clamp(10px, 1vw, 16px);
  margin-top: 1vh;
}

.home .bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 5.5vh;
  width: 60vw;
  min-width: 600px;
  /* 设置最小宽度 */
  max-width: 900px;
  /* 设置最大宽度 */
}


.item {
  margin: 0.5vh 0.5vw;
  height: 15vh;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  border-radius: 0.5vw;
  background-color: white;
  width: 38%;
  padding: 0.8vw;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 设置平滑的过渡效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 默认阴影 */
  cursor: pointer;
  /* 鼠标光标变为可点击的手形 */
  text-decoration: none;
  /* 移除下划线 */
  color: inherit;
}

.item:hover {
  transform: scale(1.02);
  /* 鼠标悬停时放大 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 鼠标悬停时阴影加重 */
}

.home .top img {
  height: 154px;
  width: auto;
}




/* 当页面宽度小于400px时 */
@media (max-width: 400px) {
  .home {
    width: 100%;
  }
  .detail {
    font-size: 3vw;
  }

  .title {
    font-size: 6vw;
  }

  .home .bottom {
    width: 100%;
    /* 可以设置为100%，以适应更小的屏幕 */
    min-width: auto;
    /* 移除min-width限制 */
    max-width: none;
    /* 移除max-width限制 */
  }

  .smalltitle {
    font-size: 3vw;
  }

  .smalldetails {
    font-size: 2vw;
  }

  .item {
    padding: 1.5vw;
  }
}

/* 当页面宽度大于或等于400px时 */
@media (max-width: 400px) {
  .detail {
    font-size: 8px;
  }

  .item {
    height: 12vh;
    z-index: 1;
    width: 35%;
  }
}
</style>
